<template>
  <div>
    <Vheader title="我的收藏"></Vheader>
    <div class="v-wrapper" ref="collectWrapper">
      <div class="v-container" v-if="collect.length===0">
        <div class="nodata">您还没有收藏商品~</div>
      </div>
      <div class="v-container" v-else>
        <div class="collect-list" @click="goDetail(item.productId)" v-for="item in collect" :key="item.productId">
          <div class="collect-list-img"><img :src="item.object.images[0]" alt=""></div>
          <div class="collect-list-info">
            <div class="collect-list-info-description">{{item.object.productName}}</div>
            <div class="collect-list-info-price">
              <p>￥{{item.object.price}}</p>
              <p>￥{{item.object.price}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header.vue'
  import BScroll from 'better-scroll'
  import axios from '../../axios/axios'
  export default {
    data() {
      return {
        collect:[]
      };
    },
    created() {

    },
    mounted() {
      var collectData=JSON.stringify({
        'actionName':'queryListPage',
        'controllerName':'userOperationRecord',
        'data':[{
          'operationType':'collection'
        },1,10]
      });
      var that=this;
      var token=localStorage.getItem('userToken');
      if(token){
        this.$root.tokenValidat(token,function (result) {
          if(result){
            axios.post({
              data:collectData,
              callback(res){
                if(res.data.data!==null){
                  that.collect=res.data.data;
                  that.$nextTick(()=>{
                    that._initScroll();
                  });
                }
                console.log(res.data.data);
              }
            });
          }else{
            this.$router.push('/login');
          }
        })
      }else{
        this.$router.push('/login');
      }
    },
    methods: {
      goDetail:function (id) {
        this.$router.push({path:'/details',query:{id:id}});
      },
      _initScroll:function () {
        this.scroll=new BScroll(this.$refs.collectWrapper,{click:true});
      }
    },
    components: {Vheader}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";
  .collect-list{
    width: 100%;
    height: 100px;
    background-color: #FFFFFF;
    padding: 5px 10px;
    border-bottom: solid 1px #f5f5f5;
    box-sizing: border-box;
    display: flex;
    .collect-list-img{
      flex: 3;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .collect-list-info{
      flex: 7;
      display: flex;
      .collect-list-info-description{
        flex: 7;
        padding-left: 10px;
        line-height: 20px;
        overflow: hidden;
      }
      .collect-list-info-price{
        flex: 3;
        text-align: right;
        box-sizing: border-box;
        p:first-child{
          padding-top: 15px;
        }
        p:last-child{
          font-size: 13px;
          color: #bababa;
          text-decoration: line-through;
        }
      }
    }
  }
</style>
